<template>
  <div class="laundry">
    <table border="1" style="width: 100%">
      <thead>
        <th colspan="8" style="height: 50px">出库清单</th>
      </thead>
      <tbody>
        <tr style="height: 40px">
          <td>姓名:{{ detail?.customerName == null ? "" : detail?.customerName }}</td>
          <td>
            地址：{{
              detail?.receivingAreaDetail == null
                ? ""
                : detail?.receivingAreaDetail + detail?.receivingAddress == null
                  ? ""
                  : detail?.receivingAddress
            }}
          </td>
          <td>电话：{{ detail?.receivingMobile == null ? "" : detail?.receivingMobile }}</td>
          <td>出库编码：{{ detail?.deliveryNo == null ? "" : detail?.deliveryNo }}</td>
          <td colspan="4">
            出库单备注
            <!-- <div class="remarks" v-html="detail?.remark"></div> -->
          </td>
        </tr>
        <tr>
          <td style="text-align: center">客户信息</td>
          <!-- <td>{{ detail?.customer }}</td> -->
          <!-- <td>供应商信息</td> -->
          <td colspan="2" style="height: 40px">
            <div>
              {{
                detail?.customerName == null
                  ? ""
                  : detail?.customerName + "," + detail?.customerMobileCode == null
                    ? ""
                    : detail?.customerMobileCode
              }}
            </div>
          </td>
          <td></td>
          <td colspan="4">
            <div class="remarks" v-html="detail?.remark"></div>
          </td>
        </tr>
        <tr style="height: 40px">
          <td style="text-align: center">序号</td>
          <td>商品信息</td>
          <td>商品单位</td>
          <td>商品备注</td>
          <td>预计出库数量</td>
          <td>预计出库件数</td>
          <td>实际出库数量</td>
          <td>实际出库件数</td>
        </tr>
        <tr style="height: 80px" v-for="(item, index) in list" :key="index">
          <td style="text-align: center">{{ index + 1 }}</td>
          <td>
            <div>商品名称:{{ item?.productName == null ? "" : item?.productNam }}</div>
            <div>
              规格组合:
              <!-- <span v-for="(citem, i) in JSON.parse(item.properties)" :key="i">{{ citem.specificationVal }}</span> -->
              {{ item.skuSpecification }}
            </div>
            <div>SKU编码:{{ item?.code }}</div>
            <div>ID:{{ item?.productId }}</div>
          </td>
          <td>{{ useCodeArrStore().getDictName("shop_unit", item?.productUnit) }}</td>
          <td><div class="remarks" v-html="item?.remark"></div></td>
          <td style="text-align: center">{{ item?.inventoryQuantity }}</td>
          <td style="text-align: center">{{ item?.inventoryPartQuantity }}</td>
          <td style="text-align: center">{{ item?.deliveryQuantity }}</td>
          <td style="text-align: center">{{ item?.deliveryPartQuantity }}</td>
        </tr>
      </tbody>
    </table>
    <div class="btn_print">
      <!-- <el-button type="" @click="handelClickBack">返回</el-button> -->
      <el-button type="primary" @click="handelClickPrint">打印</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getSuppliers } from "@/apis/products/specifications";
import moment from "moment";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
import { ListPage } from "@/apis/procure/warehouse";
import useCodeArrStore from "@/store/modules/select";
import { getDetail } from "@/apis/procure/outbound";

const deliveryId = ref(route.query.deliveryId);
const houseList = ref([]); //出库仓下拉数据
const houseValue = ref(""); //选中的出库仓
const detail = ref({});
const list = ref([]);
const storeList = ref([]); //收货仓库下拉数据
const userInfo = ref({});
const handelClickBack = () => {
  router.push({ path: "/procure/outbound" });
};
// 打印事件
const handelClickPrint = () => {
  // window.print(); // 打印当前窗口
  const printWindow = window.open("", "", "height=800,width=800");
  printWindow.document.write(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>Print Content</title>
          <style>
          table {
              border-collapse: collapse;
            }
            table td,
            table th {
              border: 1px solid black; /* 单元格边框 */
            }
              img{
              width:50px;
              height:50px;}
              video{
              width:50px;
              height:50px;}
          </style>
        </head>
        <body>
      <table border="1" style="width: 100%">
      <table border="1" style="width: 100%">
      <thead>
        <th colspan="8" style="height: 50px">出库清单</th>
      </thead>
      <tbody>
        <tr style="height: 40px">
          <td style="min-width:100px">姓名:${detail.value?.customerName == null ? "" : detail.value?.customerName}</td>
          <td>地址：${(detail.value?.receivingAreaDetail == null ? "" : detail.value?.receivingAreaDetail) + (detail.value?.receivingAddress == null ? "" : detail.value?.receivingAddress)}</td>
          <td>电话：${detail.value?.receivingMobile == null ? "" : detail.value?.receivingMobile}</td>
          <td>出库编码：${detail.value?.deliveryNo == null ? "" : detail.value?.deliveryNo}</td>
          <td colspan="4">出库单备注</td>
        </tr>
        <tr>
          <td style="text-align: center">客户信息</td>
          <td colspan="2" style="height: 40px">
            <div>${detail.value?.customerName == null ? "" : detail.value?.customerName + "," + detail.value?.customerMobileCode == null ? "" : detail.value?.customerMobileCode}</div>
          </td>
          <td></td>
          <td colspan="5">${detail.value?.remark == null ? "" : detail.value?.remark}</td>
        </tr>
        <tr style="height: 40px">
          <td style="text-align: center">序号</td>
          <td>商品信息</td>
          <td>商品单位</td>
          <td>商品备注</td>
          <td>预计出库数量</td>
          <td>预计出库件数</td>
          <td>实际出库数量</td>
          <td>实际出库件数</td>
        </tr>
       
          ${list.value.map((item, index) => {
            return `
          <tr style="height: 40px">
              <td style="text-align: center;max-width:50px">${index + 1}</td>
          <td>
            <div>商品名称:${item?.productName == null ? "" : item?.productName}</div>
            <div>
              规格组合:
              ${JSON.parse(item.properties).map(citem => {
                return `<span>${citem.specificationVal}</span>`;
              })}
            </div>
            <div>SKU编码:${item?.code}</div>
            <div>ID:${item?.productId}</div>
          </td>
          <td style="text-align: center">${useCodeArrStore().getDictName("shop_unit", item?.productUnit) || ""}</td>
          <td>${item?.remark == null ? "" : item?.remark}</td>
          <td style="text-align: center">${item?.inventoryQuantity == null ? "" : item?.inventoryQuantity}</td>
          <td style="text-align: center">${item?.inventoryPartQuantity == null ? "" : item?.inventoryPartQuantity}</td>
          <td style="text-align: center">${item?.deliveryQuantity == null ? "" : item.deliveryQuantity}</td>
          <td style="text-align: center">${item?.deliveryPartQuantity == null ? "" : item?.deliveryPartQuantity}</td>
            </tr>
          `;
          })}
          
    </table>
        </body>
      </html>
    `);
  printWindow.document.close();
  printWindow.print();
};
const setStyles = () => {
  setTimeout(() => {
    let imgs = document.querySelectorAll(".remarks img");
    let video = document.querySelectorAll(".remarks video");

    // 遍历这些img元素
    imgs.forEach(function (img) {
      // 设置每个img元素的宽度为100px
      img.style.width = "100px";
    });
    video.forEach(function (video) {
      // 设置每个img元素的宽度为100px
      video.style.width = "100px";
    });
  }, 1000);
};
onMounted(async () => {
  const res = await getSuppliers();
  houseList.value = res.data;
  userInfo.value = {
    name: JSON.parse(localStorage.getItem("userinfo")).tenantName,
    time: moment().format("YYYY/MM/DD HH:mm:ss")
  };

  const res2 = await ListPage({ page: 1, size: 9999 }); //入库仓
  storeList.value = res2.data.records;

  if (route.query.factoryId) houseValue.value = route.query.factoryId;

  getList();
  // 修改备注富文本样式
  setStyles();
});

//查询详情
const getList = () => {
  getDetail({ deliveryId: deliveryId.value }).then(res => {
    if (res.code === 200) {
      console.log("详情数据===", res.data);
      detail.value = res.data;
      list.value = res.data.childVOList;
    }
  });
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
// 表格样式
table {
  border-collapse: collapse;
}
table td,
table th {
  border: 1px solid black; /* 单元格边框 */
}
.btn_print {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.laundry {
  padding: 20px;
}
.procure-outbound-list {
  height: calc(100% - 0px);
  overflow-y: auto;
  padding: 0 20px 0px 20px;
  position: relative;

  .search-wrap {
    padding: 20px;
    overflow-x: hidden;
    background-color: #f6f8fa;
  }

  .info {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 22;
    & > div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 0;
      border-bottom: 1px solid #e2e8f0;
    }
    & > div > div {
      display: flex;
    }
    .left {
      h3 {
        &.green {
          color: #14c85c;
        }
        &.gray {
          color: #86909c;
        }
        &.orange {
          color: #ff9900;
        }
      }
      .creater {
        color: #1a1a1a;
        font-weight: bold;
      }
    }
  }
  .content {
    height: calc(100% - 75px);
    :deep(.el-aside) {
      flex: 1;
      padding: 20px 20px 20px 0;
      header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 18px;
        .supper {
          flex: 1;
          display: flex;
          align-items: center;
          padding-right: 20px;
          p {
            width: 100%;
            color: #86909c;
            font-size: 18px;
            b {
              color: #3d3d3d;
              font-weight: normal;
            }
          }
          .el-select {
            flex: 1;
          }
        }
      }
      .products-list {
        .table-header {
          background-color: #f2f6fc;
          margin-bottom: 10px;
        }
        .table-body {
          .list-item {
            margin-bottom: 10px;
            & > div {
              border: 1px solid #e1e6ed;
              display: flex;
              align-items: center;
              &:not(:first-of-type) {
                border-left: none;
              }
            }
            .col1 {
              & > div {
                display: flex;
              }

              .left {
                img {
                  width: 80px;
                  height: 80px;
                  border-radius: 4px;
                }
              }
              .right {
                padding-left: 18px;
                .name {
                  font-size: 14px;
                  color: #3d3d3d;
                  margin-bottom: 5px;
                }
                p {
                  font-size: 12px;
                  color: #86909c;
                  margin-bottom: 5px;
                }
              }
            }
            .tips {
              display: block;
              padding: 16px 14px;
              border-top: none;
              border-left: 1px solid #e1e6ed !important;
              p {
                width: 100%;
                color: #4e5969;
                font-size: 12px;
              }
            }
          }
        }
        .table-header,
        .table-body {
          & > div > div:first-of-type {
            display: flex;
            justify-content: space-between;
            & > div {
              padding: 14px 20px;
              &.col1 {
                // width: 45%;
                flex: 1;
              }
              &.col2,
              &.col4,
              &.col7 {
                width: 80px;
                box-sizing: border-box;
              }
              &.col3 {
                width: 140px;
                box-sizing: border-box;
              }
              &.col5,
              &.col6 {
                width: 125px;
                box-sizing: border-box;
              }
            }
          }
        }
      }
    }
    :deep(.el-main) {
      width: 300px;
      flex: none;
      background-color: #f6f8fa;
      border-left: 1px solid #e2e8f0;
      .ck-time,
      .ps-people {
        p {
          width: 120px;
          margin-bottom: 10px;
        }
        .el-select {
          flex: 1;
        }
      }
      .ps-people {
        & > div {
          display: flex;
          .el-button {
            font-size: 12px;
          }
        }
      }
      .kh-info {
        h3 {
          color: #86909c;
          font-weight: normal;
          margin: 20px 0 16px 0;
        }
        p {
          color: #86909c;
          margin-bottom: 10px;
        }
        b {
          font-weight: normal;
          color: #1a1a1a;
        }
      }
      .sh-info {
        & > p {
          font-size: 16px;
          color: #86909c;
          margin-bottom: 10px;
        }
        .el-form-item {
          flex-direction: column;
          span {
            line-height: 20px;
          }
        }
        .el-form-item__label-wrap {
          margin-left: 0 !important;
          .el-form-item__label {
            color: #86909c;
          }
        }
      }
      .ck-tips {
        p {
          color: #4e5969;
          margin-bottom: 16px;
        }
      }
    }
  }
  .action-wrap {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 64px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
    box-shadow: 0px -3px 10px 0px rgba(4, 24, 48, 0.1);
  }
}
</style>
